<template>
  <div>
    <el-card style="width: 70%;margin-left: 15%;text-align: center">
      <el-row style="font-size: 300%">{{title}}</el-row>
      答题人数：{{total}}
      <el-divider></el-divider>
      <el-form :model="allAnswer" style="text-align: left">

        <el-form-item v-for="(answers,index1) in allAnswer"
                      :key="index1">
            <span>
              {{index1+1}}.{{answers.title}}
            </span>

          <div class="show_radio" v-if="answers.type === '单选'">
            <el-radio-group v-model="answers.answer">
              <el-radio v-for="(option) in answers.options" :label="option.value" >
                {{option.value}}
              </el-radio>
            </el-radio-group>
              <el-tabs v-model="activeName[index1]" @tab-click="handleClick(answers,index1)" :stretch="true" type="border-card">
                <el-tab-pane label="各选项占比" name="first">
                  <el-row v-for="(option) in answers.options">
                    {{option.value}}
                    <el-progress :percentage="option.count/total*100"></el-progress>
                  </el-row>
                </el-tab-pane>

                <el-tab-pane label="饼状图" name="second">
                  <el-button @click="show(answers,index1)">显示数据</el-button>
                  <div :id="'myEcharts1'+myEcharts1[index1]" style="width: 900px;height: 300px;"></div>
                </el-tab-pane>

                <el-tab-pane label="折线图" name="third">
                  <el-button @click="show(answers,index1)">显示数据</el-button>
                  <div :id="'myEcharts2'+myEcharts2[index1]" style="width: 900px;height: 300px;"></div>
                </el-tab-pane>

                <el-tab-pane label="柱状图" name="fourth">
                  <el-button @click="show(answers,index1)">显示数据</el-button>
                  <div :id="'myEcharts3'+myEcharts3[index1]" style="width: 900px;height: 300px;"></div>
                </el-tab-pane>
              </el-tabs>
          </div>

          <div class="show_multiSelect" v-if="answers.type === '多选'">
            <el-checkbox-group v-model="answers.answer">
              <el-checkbox v-for="(option, index2) in answers.options" :label="option.value">
              </el-checkbox>
            </el-checkbox-group>

              <el-tabs v-model="activeName[index1]" @tab-click="handleClick(answers,index1)" :stretch="true" type="border-card">
                <el-tab-pane label="各选项占比" name="first">
                  <el-row v-for="(option) in answers.options">
                    {{option.value}}
                    <el-progress :percentage="option.count/total*100"></el-progress>
                  </el-row>
                </el-tab-pane>

                <el-tab-pane label="饼状图" name="second">
                  <el-button @click="show(answers,index1)">显示数据</el-button>
                  <div :id="'myEcharts1'+myEcharts1[index1]" style="width: 900px;height: 300px;"></div>
                </el-tab-pane>

                <el-tab-pane label="折线图" name="third">
                  <el-button @click="show(answers,index1)">显示数据</el-button>
                  <div :id="'myEcharts2'+myEcharts2[index1]" style="width: 900px;height: 300px;"></div>
                </el-tab-pane>

                <el-tab-pane label="柱状图" name="fourth">
                  <el-button @click="show(answers,index1)">显示数据</el-button>
                  <div :id="'myEcharts3'+myEcharts3[index1]" style="width: 900px;height: 300px;"></div>
                </el-tab-pane>
              </el-tabs>
          </div>

        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>

import * as echarts from 'echarts'
export default {
  data(){
    return{
      activeName:[],
      allAnswer:[],
      answer_list:[],
      title:'',
      content:'',
      myEcharts1:[],
      myEcharts2:[],
      myEcharts3:[],
      answerDetail:{
        answer:[],
        options:[],
        questionId:'',
        title:'',
        type:'',
      },
      totalUser:'',
      userId:[],
      startTime:'',
      endTime:'',
      allUser:[],
      currentUserId:'',
      options:[],
      total:'',
      currentAnswer:{},
    }
  },
  methods:{
    show(answer, index){
      let typeTitle = []
      let typeData = []
      let typeData2 = []
      for (let i = 0; i < answer.options.length; i++) {
        let itemArr = {
          value: answer.options[i].count,
          name: answer.options[i].value
        };
        typeData.push(itemArr);
        typeData2.push(answer.options[i].count);
        typeTitle.push(answer.options[i].value);
      }
      if(this.activeName[index] == "second"){
        this.initChart1(typeTitle, typeData, index)
      }else if(this.activeName[index] == "third"){
        this.initChart2(typeTitle, typeData2, index)
      }else if(this.activeName[index] == "fourth"){
        this.initChart3(typeTitle, typeData2, index)
      }
    },
    initChart1(typeTitle, typeData, index1) {
      let id ="myEcharts1" + this.myEcharts1[index1]
      let myChart = echarts.init(document.getElementById(id));

      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'center',
          left: 10,
          data: typeTitle
        },
        series: [
          {
            name: '答题统计',
            type: 'pie',
            radius: '70%',
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false
            },
            data: typeData
          }
        ]
      };
      myChart.setOption(option);
    },
    initChart2(typeTitle, typeData, index1) {
      let id = "myEcharts2" + this.myEcharts2[index1]
      let myChart = echarts.init(document.getElementById(id));

      let option = {
        xAxis: {
          type: 'category',
          data: typeTitle
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '答题统计',
            type: 'line',
            data: typeData
          }
        ]
      };
      myChart.setOption(option);
    },
    initChart3(typeTitle, typeData, index1) {
      let id = "myEcharts3" + this.myEcharts3[index1]
      console.log(typeTitle, typeData,id);
      let myChart = echarts.init(document.getElementById(id));

      let option = {
        xAxis: {
          type: 'category',
          data: typeTitle
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '答题统计',
            type: 'bar',
            data: typeData
          }
        ]
      };
      myChart.setOption(option);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {
    this.$http({
      url: "http://47.104.100.60:81/getAnswerDetailByQuestionnaireId",
      method: "post",
      data: {
        questionnaire_id:this.$route.query.questionnaireId,
      }
    }).then(res => {
      this.allAnswer = JSON.parse(res.data.answer).answers

      this.$http({
        url: "http://47.104.100.60:83/findById",
        method: "post",
        data: {
          id:this.$route.query.questionnaireId,
        }
      }).then(res => {
        this.title=res.data.title
      }).catch(err => {
        console.log(err)
      })

      this.$http({
        url: "http://47.104.100.60:81/getAllUserIdByQuestionId",
        method: "post",
        data: {
          questionnaire_id:this.$route.query.questionnaireId,
        }
      }).then(res => {
        this.total=res.data.length
        var index=0;
        for(let i=0;i<this.allAnswer.length;i++){
          this.myEcharts1.push(index)
          this.myEcharts2.push(index)
          this.myEcharts3.push(index)
          index++
        }
      }).catch(err => {
        console.log(err)
      })
    }).catch(err => {
      console.log(err)
    })
  }

}
</script>

<style scoped>

</style>